{% extends 'bootstrap_children.html' %}
{% block self_head %}
    <script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
    <link href="/static/bootstrap/dist/css/bootstrap-multiselect.css" rel="stylesheet">
    <script src="/static/bootstrap/dist/js/bootstrap-multiselect.js"></script>
{% endblock %}
{% block content %}
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header"><i class="fa   fa-floppy-o"></i> <code>Wiki</code>知识</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa    fa-pencil-square-o"> </i> 添加文章
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-8">
                                <form role="form" class="main form-horizontal">{% csrf_token %}

                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">标题</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="title" placeholder="文章标题"
                                                   value="" class="input-xlarge" required/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">内容</label>
                                        <div class="col-sm-10">
                                            <textarea id="content" class="ckeditor"></textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">分类</label>
                                        <div class="col-sm-2">
                                            <select class="form-control" name="category" id="select_category" required>
                                                <option value="" name="category">请选择分类</option>
                                                {% for ds in categoryList %}
                                                    <option value="{{ ds.id }}" name="category">{{ ds.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-1 control-label">标签</label>
                                        <div class="col-sm-2 ">
                                            <select multiple class="form-control" id="select_tag" required>
                                                <option value="">请选择标签</option>
                                                {% for ds in tagList %}
                                                    <option value="{{ ds.id }}" name="tag">{{ ds.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-1 control-label"></label>
                                        <div class="col-sm-2">
                                            <button type="button" id="button" onclick="AddWikiArticle(this)"
                                                    class="btn btn-default">提交
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-lg-4">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <i class="fa   fa-comments-o   "></i> 分类管理
                                    </div>
                                    <!-- /.panel-heading -->
                                    <div class="panel-body">
                                        <div>
                                            <button type="button" class="btn btn-xs btn-default" data-toggle="modal"
                                                    data-target="#myCategoryModal"><i
                                                    class="glyphicon glyphicon-plus"></i></button>
                                        </div>
                                        <table width="100%"
                                               class="table table-striped table-bordered table-hover dataTable no-footer"
                                               id="addCategory">
                                            <thead>
                                            <tr>
                                                <th class="text-center">
                                                    <label>
                                                        <span class="lbl"></span>
                                                    </label>
                                                    ID
                                                </th>
                                                <th class="text-center">SQL内容</th>
                                                <th class="text-center">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for ds in categoryList %}
                                                <tr>
                                                    <td class="text-center">
                                                        {{ ds.id }}
                                                    </td>

                                                    <td class="text-center">
                                                        <span class="tooltip-test" data-toggle="tooltip"
                                                              title="{{ ds.sql }}">{{ ds.name }}</span>
                                                    </td>

                                                    <td class="text-center">
                                                        <div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-xs btn-default"
                                                                        onclick="modfCategory(this,{{ ds.id }})">
                                                                    <abbr title="編輯分类"><i class="fa fa-edit"></i>
                                                                    </abbr>
                                                                </button>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-xs btn-default"
                                                                        onclick="delCategory(this,'{{ ds.name }}',{{ ds.id }})">
                                                                    <abbr title="删除分类"><i class="fa fa-trash"></i>
                                                                    </abbr>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                        <!-- /.table-responsive -->
                                    </div>
                                    <!-- /.panel-body -->
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <i class="fa   fa-comments-o   "></i> 标签管理
                                    </div>
                                    <!-- /.panel-heading -->
                                    <div class="panel-body">
                                        <div>
                                            <button type="button" class="btn btn-xs btn-default" data-toggle="modal"
                                                    data-target="#myTagModal"><i class="glyphicon glyphicon-plus"></i>
                                            </button>
                                        </div>
                                        <table width="100%"
                                               class="table table-striped table-bordered table-hover dataTable no-footer"
                                               id="addTag">
                                            <thead>
                                            <tr>
                                                <th class="text-center">
                                                    <label>
                                                        <span class="lbl"></span>
                                                    </label>
                                                    ID
                                                </th>
                                                <th class="text-center">SQL内容</th>
                                                <th class="text-center">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for ds in tagList %}
                                                <tr>
                                                    <td class="text-center">
                                                        {{ ds.id }}
                                                    </td>

                                                    <td class="text-center">
                                                        <span class="tooltip-test" data-toggle="tooltip"
                                                              title="{{ ds.name }}">{{ ds.name }}</span>
                                                    </td>

                                                    <td class="text-center">
                                                        <div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-xs btn-default"
                                                                        onclick="modfTag(this,{{ ds.id }})">
                                                                    <abbr title="編輯标签"><i class="fa fa-edit"></i>
                                                                    </abbr>
                                                                </button>
                                                            </div>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-xs btn-default"
                                                                        onclick="delTag(this,'{{ ds.name }}',{{ ds.id }})">
                                                                    <abbr title="删除标签"><i
                                                                            class="fa fa-trash"></i></abbr>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            </tbody>
                                        </table>
                                        <!-- /.table-responsive -->
                                    </div>
                                    <!-- /.panel-body -->
                                </div>
                            </div>

                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <div class="panel-footer"></div>
                    <!-- /.panel -->
                </div>
            </div>
            <div class="modal fade" id="myTagModal" tabindex="-1" role="dialog" aria-labelledby="myTagModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myTagModalLabel">
                                添加标签
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" id="tag">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>标签名称</strong></label>
                                    <div class="col-sm-6">
                                        <input class="form-control" type="text" name="name"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" onclick="addWikiData(this,'tag')">
                                添加
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

            <div class="modal fade" id="myCategoryModal" tabindex="-1" role="dialog"
                 aria-labelledby="myCategoryModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myCategoryModalLabel">
                                添加分类
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" role="form" id="category">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>分类名称</strong></label>
                                    <div class="col-sm-6">
                                        <input class="form-control" type="text" name="name"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" onclick="addWikiData(this,'category')">
                                添加
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>

        </div>

        <script type="text/javascript">

            $(document).ready(function () {
                $('#addCategory').DataTable();
            });

            $(document).ready(function () {
                $('#addTag').DataTable();
            });

            function modfCategory(obj, id) {
                var btnObj = $(obj);
                btnObj.attr('disabled', true);
                var post_data = {};
                window.wxc.xcConfirm("请输入新名称：", window.wxc.xcConfirm.typeEnum.input, {
                    onOk: function (result) {
                        if (result.length == 0) {
                            /* 如果没有输入字符串则直接退出 */
                            return;
                        }
                        ;
                        $.ajax({
                            type: 'PUT',
                            url: '/api/wiki/category/' + id + '/',
                            data: {
                                'name': result
                            },
                            success: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("修改成功", window.wxc.xcConfirm.typeEnum.success);
                                location.reload();
                            },
                            error: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("修改失败", window.wxc.xcConfirm.typeEnum.error);
                            },
                        });

                    }
                });
            }

            function delCategory(obj, name, id) {
                var btnObj = $(obj);
                var txt = "是否确认删除？";
                var option = {
                    title: "删除数据(" + name + ")配置",
                    btn: parseInt("0011", 2),
                    onOk: function () {
                        $.ajax({
                            type: 'DELETE',
                            url: '/api/wiki/category/' + id + '/',
                            success: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("分类删除成功", window.wxc.xcConfirm.typeEnum.success);
                                location.reload();
                            },
                            error: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("分类删除失败~", window.wxc.xcConfirm.typeEnum.error);
                            },
                        });
                    },
                    onCancel: function () {
                    },
                    onClose: function () {
                    }
                }
                window.wxc.xcConfirm(txt, "custom", option);
            }

            function modfTag(obj, id) {
                var btnObj = $(obj);
                btnObj.attr('disabled', true);
                var post_data = {};
                window.wxc.xcConfirm("请输入新名称：", window.wxc.xcConfirm.typeEnum.input, {
                    onOk: function (result) {
                        if (result.length == 0) {
                            /* 如果没有输入字符串则直接退出 */
                            return;
                        }
                        ;
                        $.ajax({
                            type: 'PUT',
                            url: '/api/wiki/tag/' + id + '/',
                            data: {
                                'name': result
                            },
                            success: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("标签修改成功", window.wxc.xcConfirm.typeEnum.success);
                                location.reload();
                            },
                            error: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("标签修改失败", window.wxc.xcConfirm.typeEnum.error);
                            },
                        });

                    }
                });
            }

            function delTag(obj, name, id) {
                var btnObj = $(obj);
                var txt = "是否确认删除？";
                var option = {
                    title: "删除数据(" + name + ")配置",
                    btn: parseInt("0011", 2),
                    onOk: function () {
                        $.ajax({
                            type: 'DELETE',
                            url: '/api/wiki/tag/' + id + '/',
                            success: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("标签删除成功", window.wxc.xcConfirm.typeEnum.success);
                                location.reload();
                            },
                            error: function (response) {
                                btnObj.removeAttr('disabled');
                                window.wxc.xcConfirm("标签删除失败~", window.wxc.xcConfirm.typeEnum.error);
                            },
                        });
                    },
                    onCancel: function () {
                    },
                    onClose: function () {
                    }
                }
                window.wxc.xcConfirm(txt, "custom", option);
            }

            $(document).ready(function () {
                $('#select_tag').multiselect({
                    enableClickableOptGroups: true,
                    enableCollapsibleOptGroups: true,
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    buttonWidth: '205px'
                });
                $('#select_category').multiselect({
                    enableClickableOptGroups: true,
                    enableCollapsibleOptGroups: true,
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    buttonWidth: '205px'
                });
            });

            CKEDITOR.replace('content', {
                filebrowserUploadUrl: '/wiki/upload/',
                height: '500px',
                width: '100%',
            });

            function getSelectValue(id) {
                var select = document.getElementById(id);
                var val = [];
                for (i = 0; i < select.length; i++) {
                    if (select.options[i].selected) {
                        val.push(select[i].value);
                    }
                }
                return val;
            }

            function AddWikiArticle(obj) {
                tags = getSelectValue("select_tag")
                categorys = getSelectValue("select_category")
                if (tags.length == 0) {
                    window.wxc.xcConfirm("请选择一个标签", window.wxc.xcConfirm.typeEnum.error);
                    return false;
                }
                ;
                if (categorys.length == 0) {
                    window.wxc.xcConfirm("请选择一个分类", window.wxc.xcConfirm.typeEnum.error);
                    return false;
                }
                ;
                $.ajax({
                    dataType: "JSON",
                    url: '/wiki/add/', //请求地址
                    type: "POST",  //提交类似
                    data: {
                        "title": document.getElementById("title").value,
                        "content": CKEDITOR.instances.content.getData(),
                        "tag": tags, /* $('#select_tag option:selected').val(), */
                        "category": $('#select_category option:selected').val(),
                    }, //提交参数
                    success: function (response) {
                        if (response["code"] == "200") {
                            window.wxc.xcConfirm("文章添加成功", window.wxc.xcConfirm.typeEnum.success);
                            location.reload();
                        }
                        else {
                            window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
                        }
                        ;
                    },
                    error: function (response) {
                        window.wxc.xcConfirm("文章添加失败", window.wxc.xcConfirm.typeEnum.error);
                    }
                })
            }

            function addWikiData(obj, op) {
                var btnObj = $(obj);
                btnObj.attr('disabled', true);
                var post_data = {};
                if (op == "tag") {
                    var putUrl = '/api/wiki/tag/';
                    var form = document.getElementById('tag');
                }
                else if (op == "category") {
                    var putUrl = '/api/wiki/category/';
                    var form = document.getElementById('category');
                }
                for (var i = 0; i < form.length; ++i) {
                    var name = form[i].name;
                    var value = form[i].value;
                    if (value.length == 0) {
                        window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
                        btnObj.removeAttr('disabled');
                        return false;
                    }
                    else {
                        post_data[name] = value;
                    }
                    ;

                }
                ;
                $.ajax({
                    dataType: "JSON",
                    url: putUrl, //请求地址
                    type: "POST",  //提交类似
                    data: post_data, //提交参数
                    success: function (response) {
                        btnObj.removeAttr('disabled');
                        window.wxc.xcConfirm("添加成功", window.wxc.xcConfirm.typeEnum.success);
                        location.reload();
                    },
                    error: function (response) {
                        btnObj.removeAttr('disabled');
                        window.wxc.xcConfirm("添加失败", window.wxc.xcConfirm.typeEnum.error);
                        /* 	    		location.reload(); */
                    }
                })
            }

        </script>

{% endblock %}